<template>
  <div id="app">
    <section>
      <form action="">
        <p>软件工程第二组</p>
        <input
          type="text"
          placeholder="UserId"
          id="userId"
          autoComplete="off"
          v-model="user_id"
        />
        <input
          type="password"
          placeholder="UserPwd"
          id="password"
          autoComplete="off"
          v-model="user_password"
        />
        <button type="submit" @click="login" @click.prevent="login()"><a>Login</a></button>
      </form>
    </section>
  </div>
</template>

<script>
import {getUser} from '../../network/home';
export default {
  data(){
    return{
      user_id:'',
      user_password:'',
    };
  },
  // created(){
  //   this.getUser()
  // },
  methods: {
    login() {
      getUser(this.user_id, this.user_password).then(res => {
        console.log(res)
        console.log(this.user_id)
        console.log(this.user_password)
      })
      // var userId = document.getElementById("userId").value;
      // var password = document.getElementById("password").value;
      // // alert(userId);
      // if (userId == "admin" && password == "123") {
      //   this.$router.replace('/home');
      //   console.log("gohome")
      //   // this.$router.go(-1);

      //   // alert("登录成功")
      // } else {
      //   alert("用户名或密码输入错误");
      // }
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  font-family: "Poppins", sans-serif;
  overflow-x: hidden;
}

#app {
  height: 100%;
}

section {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(
    94.3deg,
    rgba(26, 33, 64, 1) 10.9%,
    rgba(81, 84, 115, 1) 87.1%
  );
  overflow: hidden;
}

section::before {
  position: absolute;
  content: "";
  z-index: 2;
  width: 450px;
  height: 450px;
  top: 50%;
  left: 50%;
  transform: translate(-100%, -80%);
  background-color: #ffe53b;
  background-image: linear-gradient(147deg, #ffe53b 0%, #ff2525 74%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  animation: pulse 1.5s infinite;
}

section::after {
  position: absolute;
  content: "";
  z-index: 2;
  width: 300px;
  width: 300px;
  height: 300px;
  top: 50%;
  left: 50%;
  transform: translate(10%, 20%);
  background-color: #fa8bff;
  background-image: linear-gradient(
    45deg,
    #fa8bff 0%,
    #2bd2ff 52%,
    #2bff88 90%
  );
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.2);
  animation: pulse 1.6s infinite;
}

@keyframes pulse {
  50% {
    box-shadow: 0 0 0 50px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

form {
  position: relative;
  z-index: 3;
  width: 320px;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 45px 30px;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
}

form p {
  color: #fff;
  display: block;
  text-align: center;
  margin: 0 0 30px 0;
}

input {
  width: 100%;
  height: 50px;
  border-radius: 8px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  margin-bottom: 15px;
  color: #fff;
  outline: none;
  padding-left: 10px;
}

input::placeholder {
  color: #fff;
  padding-left: 10px;
}

button {
  width: 100%;
  height: 50px;
  border: 0;
  background-image: linear-gradient(
    to right,
    #02aab0 0%,
    #00cdac 51%,
    #02aab0 100%
  );
  background-size: 200% auto;
  border-radius: 8px;
  color: #fff;
  outline: none;
  cursor: pointer;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transition: ease 0.4s;
  float: left;
}

button:hover {
  background-position: right center;
  color: #fff;
  text-decoration: none;
}

button a {
  line-height: 50px;
  display: block;
  height: inherit;
  text-decoration: none;
  color: #fff;
}
</style>
